<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box {
            width: 640px;
            overflow: hidden;
            position: relative;
        }
        #box-cen {
            width: 2560px;
            overflow: hidden;
            transition: all .6s;
            position: relative;
            left: 0;
        }
        #box-cen img {
            float: left;
        }
        #left {
            width: 60px;
            height: 70px;
            border: none;
            outline: none;
            background: rgba(5, 218, 255, 0.6);
            font-size: 30px;
            position: absolute;
            top: 40%;
            left: 10px;
        }
        #right {
            width: 60px;
            height: 70px;
            background: rgba(5, 218, 255, 0.6);
            border: none;
            outline: none;
            font-size: 30px;
            position: absolute;
            top: 40%;
            right: 10px;
        }
        #d {
            position: absolute;
            bottom: 0;
            left: 39%;
        }
        #d span {
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid greenyellow;
            margin: 0 10px;
        }
        .active {
            background: skyblue;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="box-cen">
            <img width="640" src="https://pics6.baidu.com/feed/342ac65c10385343602138757883e27bcb80880a.jpeg?token=698f2296c2fb6c49d96c199a0aa8f704&s=E8ECA0440C29AE55487D118303003088" alt="">
            <img width="640" src="https://pics4.baidu.com/feed/09fa513d269759ee45812a7e586b11136f22dfcc.jpeg?token=8e0002fc800a62c6aeedbb2a2b72b079&s=E1548B665B21BA531AFD9E950300408F" alt="">
            <img width="640" src="https://pics3.baidu.com/feed/5fdf8db1cb13495492fa1559bddec05dd0094ab9.jpeg?token=852e8375beb55a0990a5406a2ad2e3ff&s=33B03E89CCD204C0162876AF0300A084" alt="">
            <img width="640" src="https://pics6.baidu.com/feed/d439b6003af33a87547c56712dcc423d5243b5da.jpeg?token=9f3313b5fbc8bcac4695091709e169a2&s=ECE025C04478A5D01CF1449803005082" alt="">
        </div>
        <button id="left"> < </button>
        <button id="right"> > </button>
        <div id="d">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</body>
<script>
    function $(id) {
        return document.getElementById(id)
    }
    var i = 0; 
    var _left = $("left")
    var _right = $("right")
    var d = $("d")
    var spans = d.getElementsByTagName("span");
    var imgs = document.getElementsByTagName("img")
    var imgWidth = imgs[0].getAttribute("width")  
    var boxcen = $("box-cen")
    _left.onclick = function () {
        i--
        if(i < 0) {
            i = imgs.length-1;
        }
        clearInterval(time)
        time = setInterval(function () {
            i++
            if(i > imgs.length-1) {
                i = 0;
            }
            lbt(i)
        },3000)
        lbt(i)
    }
    _right.onclick = function () {
        i++
        if(i > imgs.length-1) {
            i = 0;
        }
        clearInterval(time)
        time = setInterval(function () {
            i++
            if(i > imgs.length-1) {
                i = 0;
            }
            lbt(i)
        },3000)
        lbt(i)
        
    }
    function lbt (i) {
        boxcen.style.left = i * -imgWidth + "px"
        for (var k = 0; k < spans.length; k++) {
            spans[k].className = ""
        }
        spans[i].className = "active"
    }
    for (var j = 0; j < spans.length; j++) {
        (function (j) {
            spans[j].onclick = function () {
                i = j
                clearInterval(time)
                time = setInterval(function () {
                    i++
                    if(i > imgs.length-1) {
                        i = 0;
                    }
                    lbt(i)
                },3000)
                lbt(j)
            }
        }(j))
    }
    var time = setInterval(function () {
        i++
        if(i > imgs.length-1) {
            i = 0;
        }
        lbt(i)
    },3000)
</script>
</html>